<template>
  <block v-for="(item,index) in list" :key="item.id">
    <coupon-item :item="item" :type="2" @changeItem="changeItem"></coupon-item>
  </block>
  <back-page></back-page>
  <view class="coupon-btn" @click="confirmCoupon">提交 </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import couponItem from '../components/coupon-item.vue';
  import { couponList } from '../../../config/api';
  const list = ref([])
  const couponData = ref({})
  onMounted(() => {
    _couponList()
  })
  const changeItem = (row) => {
    couponData.value = row
    list.value.forEach(item => {
      if (row.id == item.id) item.show = true
      else item.show = false
    })
  }
  // 优惠券列表
  const _couponList = () => {
    couponList({ page: 1, limit: 20, status: 0 }).then(res => {
      list.value = res.data.data.map(item => {
        item.show = false
        return item
      })
    })
  }
  const confirmCoupon = () => {
    if (!couponData.value.id) return
    uni.$emit('formCoupon', couponData.value)
    uni.navigateBack()

  }
</script>

<style scoped lang="scss">
  .coupon-btn {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    line-height: 90rpx;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    text-align: center;
    bottom: env(safe-area-inset-bottom);
  }
</style>